<template lang="html">
  <div class="">
      <div class="header">
          <!-- <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
              <el-input placeholder="输入市代名称" v-model="keyword" style="width: 420px;">
                <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
              </el-input>
          </el-form> -->
      </div>
      <div class="body">
          <el-table :data="tableData.list" style="width: 100%">
              <el-table-column label="市代名称" align="center" width="">
                  <template slot-scope="scope">
                        <el-button type="primary" @click="getCancelDetail(scope.row)" size="mini" plain>{{scope.row.company}}</el-button>
                  </template>
              </el-table-column>
              <el-table-column label="联系方式" prop="phone" align="center" width=""></el-table-column>
              <el-table-column label="负责人" prop="leader" align="center" width=""></el-table-column>
              <el-table-column label="地区" align="center" width="">
                  <template slot-scope="scope">
                      <p v-if="!scope.row.area.length">--</p>
                      <p v-else v-for="i,k in scope.row.area" :key="k">{{i.name}}</p>
                  </template>
              </el-table-column>
              <el-table-column label="取消理由" prop="" align="center" width="">
                  <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                          <p>{{scope.row.reason}}</p>
                          <el-button type="primary" slot="reference" size="mini" plain>查看理由</el-button>
                      </el-popover>
                  </template>
              </el-table-column>
              <el-table-column label="申请时间" prop="create_time" align="center" width=""></el-table-column>
              <el-table-column label="操作" align="center" width="">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="doPass(scope.row)">通过</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>

      <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="search" :page-count='tableData.rows' >
          </el-pagination>
      </div>

      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-table :data="popData.mate">
          <el-table-column width="100" align="center" property="agent_num" label="运营商数量"></el-table-column>
          <el-table-column width="100" align="center" property="balance" label="系统余额"></el-table-column>
          <el-table-column width="" align="center" label="库存">
              <el-table-column width="" align="center" property="name" label="物料名称"></el-table-column>
              <el-table-column width="" align="center" property="ration" label="期初配给"></el-table-column>
              <el-table-column width="" align="center" property="materiel_stock" label="剩余库存"></el-table-column>
          </el-table-column>
        </el-table>
      </el-dialog>

  </div>

</template>

<script>
export default {
  data (){
    return {
      tableData: [],
      popData: {},
      keyword: '',
      dialogTableVisible:false
    }
  },
  created(){
    this.search();
  },
  methods: {
    search(page = 1){
      this.tableData = []
      this.$http3.cancelList({page}).
      then(res=>{
        this.tableData =
        res.data.code == 1?
        res.data.data:[]

      })
    },
    getCancelDetail(e){
      this.popData = {};
      this.dialogTableVisible = true;
      this.$http3.getCancelDetail({
        gid: e.gid
      }).then(res=>{
        this.popData =
        res.data.code == 1?
        res.data.data:{}
        for(var i=0;i<this.popData.mate.length;i++){
          this.popData.mate[i].agent_num = this.popData.agent_num
          this.popData.mate[i].balance = this.popData.balance
        }
      })
    },

    doPass(e){
      this.$confirm("您确定要取消合作吗？")
      .then(_=>{
        this.$http3.cancelHandle({
          id: e.id,
          gid: e.gid,
        }).then(res=>{
          res.data.code == 1?
          this.$message.success(res.data.msg):
          this.$message.error(res.data.msg);
          this.search()
        })
      }).catch(_=>0)
    },
  }

}
</script>

<style lang="css" scoped>
/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}

.preview-img{
  display: block;
  width: 100%;
  height: 30px;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
</style>
